<template>
	<view class="update-window" @touchmove.stop.prevent>
		<view class="update-content">
			<image src="/static/update-bg.png" class="update-bg" mode="aspectFill"></image>
			<view class="title-view">发现新版本</view>
			<scroll-view scroll-y class="scroll-view">
				<view class="scroll-desc">新版本特性</view>
				<rich-text class="rich-text" :nodes="entity.content || ''"></rich-text>
			</scroll-view>
			<view class="update-button" @click="updateEvent">{{success ? '更新中...' : '立即升级'}}</view>
			<view class="button-close" @click="onClose">以后再说</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "UpdateWindow",
		props: {
			entity: Object
		},
		data() {
			return {
				progress: 0,
				success: false
			};
		},
		methods: {
			onClose() {
				this.$emit('close')
			},
			updateEvent() {
				if (this.success) return
				let platform = uni.getSystemInfoSync().platform
				if (platform == 'ios') return plus.runtime.openURL(this.entity.urlIos);
				this.downloadFile(this.entity.url)
			},
			downloadFile(url) {
				return new Promise((resolve, reject) => {
					this.success = true
					const downloadTask = uni.downloadFile({
						url,
						success: (res) => {
							if (res.statusCode !== 200) return (this.success = false, this.$ajax
								.showToast('下载失败'))
							plus.runtime.install(
								res.tempFilePath, {
									force: false
								},
								() => plus.runtime.restart(),
								err => {
									this.success = false;
									uni.showToast({
										title: '安装升级包失败',
										icon: 'none'
									});
								}
							);
						},
						fail: (err) => (this.success = false, this.$ajax.showToast('更新失败'))
					})
					downloadTask.onProgressUpdate(e => this.progress = e.progress);
				})

			},
		}
	}
</script>

<style scoped lang="scss">
	.update-window {
		width: 100%;
		height: 100vh;
		background: rgba(6, 0, 0, 0.9);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9999;
		@extend .column;

		.update-content {
			width: 616upx;
			height: 748upx;
			@extend .column;
			justify-content: space-between;
			position: relative;
			background: white;
			border-radius: 18upx;
			padding-top: 103upx;
			padding-bottom: 20upx;

			.update-bg {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				border-radius: 18upx;
				z-index: 1;
			}

			.scroll-view {
				width: 100%;
				flex: 1;
				position: relative;
				z-index: 2;
				padding: 0 78upx;

				.scroll-desc {
					font-size: 29rpx;
					font-weight: 600;
					color: #000143;
				}

				.rich-text {
					font-size: 27rpx;
					font-weight: 400;
					color: #282726;
				}
			}

			.title-view {
				width: 100%;
				padding-left: 154upx;
				position: relative;
				z-index: 2;
				font-size: 51rpx;
				font-weight: 600;
				color: #000143;
				margin-bottom: 82upx;
			}

			.text-one {
				width: 100%;
				padding: 0 34upx;
				text-align: left;
				font-size: 26upx;
				font-weight: 500;
				color: #333333;
			}

			.text-one+.text-one {
				margin-top: 37upx;
			}

			.update-button {
				width: 539rpx;
				height: 91rpx;
				@extend .column;
				background: linear-gradient(180deg, #FF7065 0%, #FF2615 100%);
				box-shadow: 0rpx 7 7rpx 0rpx rgba(21, 26, 255, 0.1);
				border-radius: 49rpx;
				font-size: 29rpx;
				font-weight: 400;
				color: #FFFFFF;
				position: relative;
				z-index: 2;
			}

			.button-close {
				width: 539rpx;
				height: 91rpx;
				font-size: 29rpx;
				font-weight: 400;
				color: #FF2615;
				@extend .column;
				position: relative;
				z-index: 2;
				margin-top: 20upx;
			}
		}
	}
</style>